<template>
    <transition name="fade">
    <div id="detail">
        <div class="detail">
            <div class="common-form">
                <!-- 轮播 -->
                <div style="width:100%;margin-bottom:5% ;" class="bannerH">
                    <!-- Using the slider component -->
                    <slider ref="slider" :options="options">
                        <!-- slideritem wrapped package with the components you need -->
                        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">
                            <img :src="url + item"/>   
                        </slideritem>
                        <!-- Customizable loading -->
                        <div slot="loading">loading...</div>
                    </slider>
                </div>
                <div class="detail-tel">
                    <p><em class="vip-em">vip独享</em>{{VipDetail.goods_title}}</p>
                    <span @click="addCollection"><i></i>收藏</span>
                </div>
                <div class="detail-price">
                    <p>价格：￥{{VipDetail.market_price}}</p>
                    <p>会员价：￥<em>{{VipDetail.price}}</em></p>
                </div>
                <div class="detail-other">
                    <em>邮费：0.00</em>
                    <em>销量：{{VipDetail.has_sold}}</em>
                    <em>库存：{{VipDetail.inventory}}</em>
                </div>
            </div>
            <!-- 充值 -->
            <div class="vip-recharge"  @click="switchTo('/openVip')">
                <a class="detail-recharge">
                    充值 充值会员  尊享3大权益<i>&gt;</i>
                </a>
            </div>
            <!-- 服务 -->
            <div class="common-form">
                <div class="detail-service">
                    <span><em></em>服务</span> 100%正品·品牌授权·48小时发货
                </div>
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                进入店铺
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em>
                </div>
                <!-- <a href="#">查看全部评价<i>&gt;</i></a> -->
            </div>
            <!-- 评价 
            <div class="common-form">
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/1.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
                <div class="detail-evaluate">
                    <div class="detail-evaluate-img">
                        <img src="build/img/2.jpg"/>
                    </div>
                    <div class="detail-evaluate-text">
                        <p>小丸子</p>
                        <p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>
                    </div>
                </div>
            </div>-->
            <!-- 店铺 -->
            <div class="common-form">
                <router-link :to="'/Shop/' + VipDetail.merchant_id" class="detail-shop">
                    <div class="detail-shop-img"><img :src="url + shop_Info.logo"/></div>
                    <div class="detail-shop-text">
                        <div class="detail-shop-text-tel">{{shop_Info.merchant_name}}<a>进店逛逛</a></div>
                        <div class="detail-shop-text-other">
                            <!-- <span>商品描述  <em>4.98</em></span>
                            <span>卖家服务  <em>4.98</em></span>
                            <span>物流服务  <em>4.98</em></span> -->
                        </div>
                    </div>
                </router-link >
            </div>
            <!-- 公共标题 -->
            <div class="common-tel">
                商品详情
                <div class="common-tel-dot">
                    <em></em>
                    <em></em>
                    <em></em> 
                </div>
            </div>
            <!-- 商品简介 -->
            <div class="common-form">
                <div class="detail-info" v-html="VipDetail.content">	
                    <!-- {{VipDetail.content}} -->
                </div>
            </div>
            <div class="footer-100"></div>
            <!-- 详情底部 -->
            <div class="detail-footer">
                <a @click="switchTo('/')"><i></i><p>首页</p></a>
                <a @click="kefu"><i></i><p>客服</p></a>
                <a @click="shopCart(VipDetail.id)"><i></i><p>加入购物车</p></a>
                <a class="vip-btn" @click="seleceGg($event)">vip立即购买</a>
            </div>
            <!-- 客服弹框 -->
            <!-- 弹框 -->
            <div class="black" v-show="tan"></div>
            <div class="rule" v-show="tan2">
                <p class="ruleTel">客服电话</p>
                <div>
                    <!-- <p>已经领了2次了，分享可在领一次</p> -->
                    <p class="ruleText">18526793565</p>
                    <div class="ruleBtn">
                        <!-- <a class="link">确定</a> -->
                    </div>
                </div>
                <i @click="times">&times;</i>
            </div>
            <!-- 选择规格 -->
            <div class="black" v-show="isShow"  @click="black" ></div>
            <div class="footer-standard"  v-show="isShow2">
                <div class="footer-standard-shop">
                    <img :src="VipDetail.thumbnail" alt="" />
                    <div>
                        <p v-if="vip == 1">￥<em>{{VipDetail.market_price}}</em></p>
                        <p v-else>￥<em>{{VipDetail.price}}</em></p>
                        <!-- <p><em>选择</em>：餐具套装（2人装），白色，1件</p> -->
                    </div>
                </div>
                <div class="footer-shuxing">
                    <div class="footer-standard-num">
                        <p>{{VipDetail.spec_name1}}</p>
                        <div>
                            <em v-for="(item,index) in attr" :class="activeClass == index ? 'active':''" :key="index" @click="getItme(index,$event)">{{item.spec_1}}</em>
                        </div>
                    </div>
                    <div class="footer-standard-num">
                        <p>{{VipDetail.spec_name2}}</p> 
                        <div>
                            <em  v-for="(item,index) in spec2" :class="activeClass2 == index ? 'active':''" :key="index" @click="getspec2(index,item.id)">{{item.spec_2}}</em>
                        </div>
                    </div>
                    <div class="footer-standard-num">
                        <p>数量</p> 
                        <div class="goods-num">
                            <span class="sub" @click="sub">-</span>
                            <span class="num"><input type="text"  disabled="disabled" v-model="num"/></span>
                            <span class="add" @click="add">+</span>
                        </div>
                    </div>
                </div>
                <!-- <router-link  :to="{path:'/Corder/' + VipDetail.id +'/'+ specT}" class="detail-btn">确定{{VipDetail.id}}</router-link> -->
                <button class="detail-btn" @click="confirm(VipDetail.id)">确定</button>
            </div>
            <!-- 加入购物车规格弹框 -->
            <div class="black" v-show="isShow3"  @click="black" ></div>
            <div class="footer-standard"  v-show="isShow4">
                <div class="footer-standard-shop">
                    <img :src="VipDetail.thumbnail" alt="" />
                    <div>
                        <p v-if="vip == 1">￥<em>{{VipDetail.market_price}}</em></p>
                        <p v-else>￥<em>{{VipDetail.price}}</em></p>
                        <!-- <p><em>选择</em>：餐具套装（2人装），白色，1件</p> -->
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>{{VipDetail.spec_name1}}</p>
                    <div>
                        <em v-for="(item,index) in attr" :class="activeClass == index ? 'active':''" :key="index" @click="getItme(index,$event)">{{item.spec_1}}</em>
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>{{VipDetail.spec_name2}}</p> 
                    <div>
                        <em  v-for="(item,index) in spec2" :class="activeClass2 == index ? 'active':''" :key="index" @click="getspec2(index,item.id)">{{item.spec_2}}</em>
                    </div>
                </div>
                <div class="footer-standard-num">
                    <p>数量</p> 
                    <div class="goods-num">
                        <span class="sub" @click="sub">-</span>
                        <span class="num"><input type="text"  disabled="disabled" v-model="num"/></span>
                        <span class="add" @click="add">+</span>
                    </div>
                </div>
                <button @click="close(VipDetail.id)" class="detail-btn">确定</button>
                <!-- <button class="detail-btn" @click="confirm($event)" :data-id="VipDetail.id">确定</button> -->
            </div>

        </div>
    </div>
    </transition>
</template>

<script>
import { slider, slideritem } from 'vue-concise-slider'
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'

let data = {
    tan:false,
    tan2:false,
    isShow:false,
    isShow2:false,
    isShow3:false,
    isShow4:false,
    activeClass: -1,
    activeClass2:-1,
    num:1,
    url:'http://api.huiwanzhong365.com',
    // 轮播
    someList:[],
    //Slider configuration [obj]
    options: {
        currentPage: 0
    },
    // 商品详情
    VipDetail:{
        goods_title:'',//商品名称
        price:'',//会员价
        market_price:'',//市场价
        inventory:'',//库存
        content:'',//商品内容
        spec_name1:'',//规格名称
        spec_name2:'',//规格名称
        thumbnail:'',//商品图片
        has_sold:'',//已售数量
        merchant_id:'',
        spec_type:'',//属性值
    },
    merchantID:'',
    attr:[],
    // attr2:[],
    spec2:[],
    specO:'', //规格1
    specT:'', //规格2
    shop_Info:{},//店铺信息
    vip:'',
}

    export default {
        name:'VipList',
        data () {
            return data
        },
        components: {
            slider,
            slideritem
        },
        beforeRouteLeave: function (to, from, next) {
            console.log('[detail beforeRouteLeave]', to, from)
            next()
            setTimeout(() => {
                data = {
                    tan:false,
                    tan2:false,
                    isShow:false,
                    isShow2:false,
                    isShow3:false,
                    isShow4:false,
                    activeClass: -1,
                    activeClass2:-1,
                    num:1,
                    url:'http://api.huiwanzhong365.com',
                    // 轮播
                    someList:[],
                    //Slider configuration [obj]
                    options: {
                        currentPage: 0
                    },
                    // 商品详情
                    VipDetail:{
                        goods_title:'',//商品名称
                        price:'',//会员价
                        market_price:'',//市场价
                        inventory:'',//库存
                        content:'',//商品内容
                        spec_name1:'',//规格名称
                        spec_name2:'',//规格名称
                        thumbnail:'',//商品图片
                        has_sold:'',//已售数量
                        merchant_id:'',
                        spec_type:'',//属性值
                    },
                    merchantID:'',
                    attr:[],
                    // attr2:[],
                    spec2:[],
                    specO:'', //规格1
                    specT:'', //规格2
                    shop_Info:{},//店铺信息
                    vip:'',
                }
            }, 500)
        },
        mounted(){
            this.detail();
            //this.shopInfo();
            var bannerW = $('.bannerH').width();
            console.log(bannerW)
            $('.bannerH').height(bannerW)
        },
        methods:{
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            //商品详情
            detail:function(){
                // var uo = url.parse(window.location.href, true)
                // console.log(uo)
                //console.log(this.$route.params.id)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_type:0,
                    goods_id:this.$route.params.id
                }
                that.$http.post('/index/merchant/goods/read',qs.stringify(draw)).then(res=>{
                    //console.log(res.data.list)
                    res.data.list.thumbnail = this.url + res.data.list.thumbnail 
                    res.data.list.img_url = res.data.list.img_url.split(',')
                    
                    this.VipDetail = res.data.list;
                    this.attr = res.data.attr
                    this.spec2 = res.data.attr2
                    this.someList = res.data.list.img_url
                    this.merchantID = res.data.list.merchant_id
                    //console.log(this.merchantID)
                    this.shopInfo(this.merchantID)
                    //console.log(this.VipDetail.spec_type)
                }).catch(err=>{
                    console.log(err)
                })
            },
            //获取商家头像和名称
            shopInfo:function(id){
                // /index/merchant/MerchantLogo
                var that = this
                // console.log(this.merchantID)
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    merchant_id:id,
                }
                that.$http.post('/index/merchant/MerchantLogo',qs.stringify(draw)).then(res=>{
                    //console.log(res)
                    this.shop_Info = res.data
                    // this.shop_Info.logo = res.data.logo
                }).catch(err=>{
                    console.log(err)
                })
            },
            //规格弹框
            seleceGg:function(e){
                //console.log(this.VipDetail.spec_type)
                if( this.VipDetail.spec_type == 1){
                    this.isShow = true;
                    this.isShow2 = true
                }else{
                    this.$router.push({path:'/Corder',query:{ id : this.$route.params.id,s:this.specT,quantity:this.num}});
                } 
            },
            //隐藏规格
            black:function(){
                this.isShow = false;
                this.isShow2 = false;
                this.isShow3 = false
                this.isShow4 = false
                this.tan = false;
                this.tan2 = false
            },
            //选规格
            getItme(index,e) {
                this.activeClass = index; 
                this.specO = e.target.innerHTML
                //console.log(this.specO)
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_id:this.$route.params.id,
                    spec_1:e.target.innerHTML
                }
                that.$http.post('/index/merchant/goods/attrDetails',qs.stringify(draw)).then(res=>{
                    //console.log(res.data)
                    this.spec2 = res.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            //子规格
            getspec2:function(index,e){
                this.activeClass2 = index; 
                this.specT = e
                console.log(e)
            },
            //添加商品数量
            add:function(){
                this.num ++
            },
            //减少商品
            sub:function(){
                if(this.num == 1){
                    this.num == 1
                }else{
                    this.num --
                }
            },
            //添加收藏
            addCollection:function(){ 
                var that = this
                var openid = localStorage.getItem("openid")
                var draw = { 
                    openid:openid,
                    goods_id:this.$route.params.id,
                    merchant_id:this.VipDetail.merchant_id,
                    type:0,
                }
                that.$http.post('/index/user/addCollection',qs.stringify(draw)).then(res=>{
                    
                    layer.msg(res.data.info,{time:1000},function() {
                    //回调
                    })
                }).catch(err=>{
                    console.log(err)
                })
            },
            
            //客服弹框
            kefu:function(){
                this.tan = true
                this.tan2 = true
            },
            times:function(){
                this.tan = false
                this.tan2 = false
            },
            // 规格
            confirm:function(id){
                if( this.specT == ''){
                    layer.msg('请选择规格');
                }else{
                    this.$router.push({path:'/Corder',query:{ id : this.$route.params.id,s:this.specT,quantity:this.num}});
                }
            },
            //加入购物车
            shopCart:function(id){
                var that = this

                if( this.VipDetail.spec_type == 1){
                    this.isShow3 = true;
                    this.isShow4 = true
                }else{
                    // layer.msg('添加成功');
                    var openid = localStorage.getItem("openid")
                    var draw = { 
                        openid:openid,
                        goods_id:id,
                        attr_id:this.specT,
                        quantity:this.num
                    }
                    that.$http.post('/index/user/addShoppingCart',qs.stringify(draw)).then(res=>{
                        //console.log(res)
                        console.log()
                        layer.msg(res.data.info);
                        //this.shop_Info.logo = res.data.logo
                        // this.shop_Info.logo = res.data.logo
                    }).catch(err=>{
                        console.log(err)
                    })
                } 
            },
            getuser:function(){
                var that = this
                var uo = url.parse(window.location.href, true)
                console.log(uo)
                var openid = localStorage.getItem("openid")
                let pageList = that.$qs.stringify({
                    openid: openid,
                });
                axios({
                    method: "post",
                    url: "/index/user/UserInfo",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: pageList
                }).then(res => {
                    console.log(res);
                    
                    this.vip = res.data.vip
                });
            },
            close:function(id){
                var that = this
                //console.log(this.specT)
                if( this.specT == ''){
                    layer.msg('请选择规格');
                }else{
                    this.isShow3 = false;
                    this.isShow4 = false;
                    //console.log(this.VipDetail.merchant_id)
                    // var openid = localStorage.getItem("openid")
                    var openid = localStorage.getItem("openid")
                    var draw = { 
                        openid:openid,
                        goods_id:id,
                        attr_id:this.specT,
                        quantity:this.num
                    }
                    that.$http.post('/index/user/addShoppingCart',qs.stringify(draw)).then(res=>{
                        //console.log(res)
                        console.log()
                        layer.msg(res.data.info);
                        //this.shop_Info.logo = res.data.logo
                        // this.shop_Info.logo = res.data.logo
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                
            }
        },
        
    }
</script>

<style scoped>
#detail{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: white;
    overflow: auto;
}
.fade-enter-active, .fade-leave-active {
    transition: .3s linear;
}
.fade-enter, .fade-leave-to {
    transform: translateX(100%);
}



.footer-shuxing{
    max-height: 350px;
    overflow: auto;
    width: 100%;
}
.black{
    background:rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 19;
}
.rule{
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
}
.ruleTel{
    font-size:18px;
    font-weight: 600;
    margin-top:15px;
}
.ruleText{
    font-size:13px;
    margin-top:15px;
    width:94%;
    margin-left:3%;
    line-height: 24px;
    color:#999;
}
.rule p:nth-child(4){
    font-size:12px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 15px;
}
.rule p:nth-child(4) a{
    color:#259B24;
}
.rule i{
    color:#FFF;
    background: #BBB;
    width:20px;
    height:20px;
    border-radius: 50%;
    text-align: center;
    font-size:16px;
    position: absolute;
    top:10px;
    right: 10px;
    line-height: 20px;
}
.ruleBtn{
    margin-top:15px;
}

.link{
    width: 100px;
    text-align: center;
    height: 34px;
    color: #FFF;
    border-radius: 5px;
    background: #000;
    border: 0;
    display: inline-block;
    line-height: 38px;
    margin-bottom: 15px;
}
.slider-active img{
    width:100%;
    height:100%;
}
.detail-btn{
    display: inline-block;
    line-height: 49px;
}
.black{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	/* display: none; */
}
.vip-btn{
	background: #DFB87D !important;
}
.vip-em{
    width: 76px;
    height: 26px;
    line-height: 26px;
    border-radius: 5px;
    background-color: rgba(223, 184, 125, 1);
    text-align: center;
    color: #FFF;
    font-weight: 600;
    display: inline-block;
    margin-right: 10px;
}
.vip-recharge{
	width:94%;
	margin:0 auto;
	height: 38px;
	line-height: 38px;
	border-radius: 5px;
	background-color: rgba(252, 40, 71, 1);
	margin-top:10px;
}
.vip-recharge a{
	color:#FFF;
	font-weight: 600;
	padding: 0 10px
}
.vip-recharge i{
	color: #FFF;
    float: right;
    padding: 0 8px;
    font-size: 14px;
}
.detail-footer a:nth-child(1),.team-footer a:nth-child(1){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(1) i,.team-footer a:nth-child(1) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/index.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(2) i,.team-footer a:nth-child(2) i{
	display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/kefu.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(2),.team-footer a:nth-child(2){
	width:15%;
	float: left;
	text-align: center;
}
.detail-footer a:nth-child(3) i{
	display: inline-block;
    height: 19px;
    width: 21px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../../assets/shop.png)  no-repeat;
    background-size:100%;
    margin-top:8px;
}
.detail-footer a:nth-child(3) p,.detail-footer a:nth-child(2) p,.detail-footer a:nth-child(1) p{
    font-size:12px;
}
.detail-footer a:nth-child(3){
	width:25%;
	float: left;
    text-align: center;
    background: #EBEBEB; 
    color: #333;
    height: auto;
    line-height: 20px;
    height: auto;

}
.detail-footer a:nth-child(4){
	width:45%;
	float: left;
	background: #FE2746 ;
	color:#FFF;
	text-align: center;
	height: 56px;
	line-height: 56px;
	color:#FFF;
}
.detail-tel span{
    margin-top: 3px;
}



</style>